<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-02-08 16:04:18
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-03-01 16:33:12
 * @FilePath: \test\src\views\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="data-flex-box">
        <Title title="今日数据统计"></Title>
        <Card :border="5">
            <van-row :gutter="15">
                <van-col :span="6" v-for="(item, index) in dateList" :key="index">
                    <Button @click="checkDateBtn(index)" size="mini" style="width:100%;border-radius: 2px;" row
                        :type="dateIndex == index ? 'primary' : 'default'">{{ item
                        }}</Button>
                </van-col>
            </van-row>
            <!-- 下拉筛选 -->
            <div class="select-content-box">
                <ChangeSelect :firstName="firstName" :flex="2" :secondName="secondName" :firstShow="firstShow"
                    :secondShow="secondShow" @handleFirst="handleFirst" spaceBetween @handleSecond="handleSecond">
                </ChangeSelect>
            </div>
            <!-- Table数据 -->
            <Table :studentsList="studentsList" :options="options"></Table>
            <div class="btn-flex-box">
                <Button block round style="margin-bottom:0px;" color="#3D7FFF">一键导出</Button>
            </div>
        </Card>
        <!-- 选择学部 -->
        <van-action-sheet v-model:show="firstShow" teleport="#app" :actions="firstActions" @select="selectFirst"
            cancel-text="取消" description="请选择学部" close-on-click-action />
        <!-- 选择年级 -->
        <van-action-sheet v-model:show="secondShow" teleport="#app" :actions="secondActions" @select="selectSecond"
            cancel-text="取消" description="请选择年级" close-on-click-action />
    </div>
</template>
<script lang="ts" setup>
import { Toast } from 'vant'
import { ref, reactive, onMounted, nextTick, onUnmounted } from 'vue'
import $util from '../util/util'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
const store = useStore()
const dateList = ref(['今天', '本周', '本月', '本学期'])
const dateIndex = ref(1)
const checkDateBtn = (val: number) => {
    dateIndex.value = val
}
const firstName = ref('扣分类型')
const secondName = ref('评分类别')
const firstShow = ref(false)
const secondShow = ref(false)
const firstActions = ref([{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }])
const secondActions = ref([{ name: "选项三" }, { name: "选项四" }, { name: "选项五" }])

const handleFirst = () => {
    firstShow.value = true
}
const handleSecond = () => {
    secondShow.value = true
}
const selectFirst = (item: any) => {
    firstShow.value = false
    firstName.value = item.name
}
const selectSecond = (item: any) => {
    secondShow.value = false
    secondName.value = item.name
}
// table数据
const studentsList = ref<any>([
    {
        user_name: '周国辉',
        class_name: '初中部-2020级(01)班',
    },
    {
        user_name: '周国辉2',
        class_name: '初中部-2020级(01)班',
    },
    {
        user_name: '周国辉3',
        class_name: '初中部-2020级(01)班',
    },
    {
        user_name: '周国辉4',
        class_name: '初中部-2020级(01)班',
    }
])
const options = ref<any>([
    { name: 'checkbox', flex: 4, faild: '', color: '', },
    { name: '姓名', flex: 6, faild: 'user_name', color: '#649FFF', },
    { name: '班级', flex: 14, faild: 'class_name', color: '', }
])
onMounted(async () => {
})
</script>
<style lang="scss" scoped>
.data-flex-box {
    position: relative;
    padding: 15px;
    background-color: #ffffff;

    .btn-flex-box {
        margin: 15px 15% 0 15%;
    }

    .select-content-box {
        margin-bottom: 15px;
        border-bottom: 1px solid #F9F9F9;
        padding-top: 15px;
    }
}
</style>
  